// 抽象模板饮料类
abstract class Drink implements IDrink{
    boilWater(){
        console.log('把水烧开了。');
    }
    brew(){}
    pourInCup(){}
    addCondiments(){}
    init(){// 初始化模板方法
        this.boilWater();
        this.brew();
        this.pourInCup();
        this.addCondiments();
    }
}
// 子类咖啡类
class Coffee extends Drink{
    brew(){
        console.log('水煮好了，现在泡咖啡');
    }
    pourInCup(){
        console.log('咖啡泡好了，现在可以倒进杯子里了');
    }
    addCondiments(){
        console.log('现在准备喝了，再加点糖和牛奶吧');
    }
}
// 子类茶类
class Tea extends Drink{
    brew(){
        console.log('水煮好了，现在泡茶');
    }
    pourInCup(){
        console.log('茶泡好了，现在可以倒进杯子里了');
    }
    addCondiments(){
        console.log('现在准备喝了，再加点水果吧');
    }
}

// 测试用例
const coffee = new Coffee();
const tea = new Tea();
coffee.init();
tea.init();


// 抽象DIV类
abstract class AbstractDiv implements IAbstractDiv{
    isInsert = true;
    setColor(el:HTMLElement,color:string){
        el.style.backgroundColor = color;
    }           
    setHeight(el:HTMLElement,height:number){
        el.style.height = height + 'px';
    }
    setWidth(el:HTMLElement,width:number){
        el.style.width = width + 'px';
    } 
    insert(el:HTMLElement){
        document.body.appendChild(el);
    }
    init(el:HTMLElement,color:string,height:number,width:number){
        this.setColor(el,color);
        this.setWidth(el,width);
        this.setHeight(el,height);
        if(this.isInsert){// 是否调用的钩子
            this.insert(el);
        }
    }
}
// 要插入的DIV类
class InsertDiv extends AbstractDiv{
    el:HTMLElement;
    constructor(){
        super();
        this.el = document.createElement('div');
    }
}
// 不需要插入的DIV类
class UninsertDiv extends AbstractDiv{
    el:HTMLElement;
    constructor(){
        super();
        this.el = document.createElement('div');
        this.isInsert = false;
    }
}
// 测试用例
let div1 = new InsertDiv();
div1.init(div1.el,'#fe007f',300,300);
let div2 = new UninsertDiv();
div2.init(div2.el,'#fe007f',300,300);// 没有插入 


